<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并</title>
		<style>
			div#pare nt{
				width: 300px;
				height:300px;
				/*  */
				border: 1px solid red;
				/* 上框：加外边距 */
				margin-bottom:40px ;
			}
			div#so n{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/* 下框：加外边距 */
				margin-top:100px ;
			}
			/* 外边距垂直合并问题 建议：加横向，不要纵向
			                     方案：去掉一个最小值，加内边距*/
			div#parent{
				width: 300px;
				height: 300px;
				bor der: 1px solid red;
				background-color: #aaffff;
				margin-top: 98px;
				/* 添加溢出隐藏或者auto */
				over flow: hidden;
				/* border:1像素透明边框 */
				bord er:1px solid transparent;
				padding-top: 1px;
			}
			div#son{
				width: 100px;
				height: 100px;
				background-color: #aaaaff;
				margin-top: 100px;
			}
								 /* 内部垂直合并： 最大值为主 
								 解决方法：1.找到父元素，添加overflow:hide
								 找到父元素，添加border或padding,建议 透明border*/
								 
		</style>
	</head>
	<body>
		<div id="parent"><div id="son"></div></div>
		
	</body>
</html>